<!doctype html>
<html>		
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<!-- HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。  -->
		<div>
			<table class="table">
		      <tbody>
		        <tr>
		          <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
		        </tr>
		        <tr>
		          <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
		        </tr>
		        <tr>
		          <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
		        </tr>
		        <tr>
		          <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
		        </tr>
		        <tr>
		          <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
		        </tr>
		        <tr>
		          <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
		        </tr>
		      </tbody>
		    </table>
	    </div>
	    <br/><br/>
	    <!-- Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 -->
	    <div>
	        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
	        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
	        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
	     </div>
	     <br/><br/>
	     <div>
	         <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
	     </div>
	     <br/><br/>
	     <!-- 内联文本元素 -->
	     You can use the mark tag to <mark>highlight</mark> text.
	     <br/><br/>
	     <!-- 被删除的文本 -->
	     <del>This line of text is meant to be treated as deleted text.</del>
	     <br/><br/>
	     <!-- 无用文本 -->
	     <s>This line of text is meant to be treated as no longer accurate.</s>
	     <br/><br/>
	     <!-- 插入文本 -->
	     <ins>This line of text is meant to be treated as an addition to the document.</ins>
	     <br/><br/>
	     <!-- 带下划线的文本 -->
	     <u>This line of text will render as underlined</u>
	     <br/><br/>
	     <!-- 小号文本 -->
	     <small>This line of text is meant to be treated as fine print.</small>
	     <br/><br/>
	     <!-- 着重 -->
	     The following snippet of text is<strong>rendered as bold text</strong>
	     <br/><br/>
	     <!-- 斜体 -->
	     The following snippet of text is rendered as<em>rendered as italicized text</em>
	     <br/><br/>
	     <!-- 文本对齐 -->
	     <div style="width:500px">
	     	<p class="text-left">Left aligned text.</p>
	     	<p class="text-center">Center aligned text.</p>
	     	<p class="text-right">Right aligned text.</p>
	     	<p class="text-justify">Justified text.</p>
	     	<p class="text-nowrap">No wrap text.</p>
	     </div>
	     <br/><br/>
	     <!-- 改变大小写 -->
	     <div>
	     	<p class="text-lowercase">Lowercased text.</p>
	     	<p class="text-uppercase">Uppercased text.</p>
	     	<p class="text-capitalize">Capitalized text.</p>
	     </div>
	     <br/><br/>
	     <!-- 缩略语 -->
		 <!--当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含 title 属性。 -->

		 <!-- 基本缩略语 -->
		 An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>
	     <br/><br/>
	     <!-- 首字母缩略语  为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。 -->
	     <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is the best thing since sliced bread.
	     <br/><br/>
	     <!-- 地址 -->
	     <!-- 让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。 -->
	     <address>
	       <strong>Twitter, Inc.</strong><br>
	       795 Folsom Ave, Suite 600<br>
	       San Francisco, CA 94107<br>
	       <abbr title="Phone">P:</abbr> (123) 456-7890
	     </address>

	     <address>
	       <strong>Full Name</strong><br>
	       <a href="mailto:#">first.last@example.com</a>
	     </address>
	     <br/><br/>
	     <!-- 引用 -->
	     <!-- 默认样式的引用  将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。 -->
	     <blockquote>
	       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	     </blockquote>
	     <br/><br/>
	     <!-- Naming a source -->
	     <!-- Add a <footer> for identifying the source. Wrap the name of the source work in <cite>. -->
	     <blockquote>
	       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
	     </blockquote>
	     <br/><br/>
	     <!-- 反转 -->
	     <!-- Add .blockquote-reverse for a blockquote with right-aligned content. -->
	     <blockquote class="blockquote-reverse">
	       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
	     </blockquote>
	     <br/><br/>
	     <!-- 无序列表 -->
	     <ul>
           <li>Lorem ipsum dolor sit amet</li>
           <li>Consectetur adipiscing elit</li>
           <li>Integer molestie lorem at massa</li>
           <li>Facilisis in pretium nisl aliquet</li>
           <li>Nulla volutpat aliquam velit
             <ul>
               <li>Phasellus iaculis neque</li>
               <li>Purus sodales ultricies</li>
               <li>Vestibulum laoreet porttitor sem</li>
               <li>Ac tristique libero volutpat at</li>
             </ul>
           </li>
           <li>Faucibus porta lacus fringilla vel</li>
           <li>Aenean sit amet erat nunc</li>
           <li>Eget porttitor lorem</li>
         </ul>
	     <br/><br/>
	     <!-- 有序列表 -->
	     <ol>
           <li>Lorem ipsum dolor sit amet</li>
           <li>Consectetur adipiscing elit</li>
           <li>Integer molestie lorem at massa</li>
           <li>Facilisis in pretium nisl aliquet</li>
           <li>Nulla volutpat aliquam velit</li>
           <li>Faucibus porta lacus fringilla vel</li>
           <li>Aenean sit amet erat nunc</li>
           <li>Eget porttitor lorem</li>
         </ol>
	     <br/><br/>
	     <!-- 无样式列表 -->
	     <!-- 移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。 -->
	     <ul class="list-unstyled">
           <li>Lorem ipsum dolor sit amet</li>
           <li>Consectetur adipiscing elit</li>
           <li>Integer molestie lorem at massa</li>
           <li>Facilisis in pretium nisl aliquet</li>
           <li>Nulla volutpat aliquam velit
             <ul>
               <li>Phasellus iaculis neque</li>
               <li>Purus sodales ultricies</li>
               <li>Vestibulum laoreet porttitor sem</li>
               <li>Ac tristique libero volutpat at</li>
             </ul>
           </li>
           <li>Faucibus porta lacus fringilla vel</li>
           <li>Aenean sit amet erat nunc</li>
           <li>Eget porttitor lorem</li>
         </ul>
	     <br/><br/>
	     <!-- 内联列表 -->
	     <!-- 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 -->
	     <ul class="list-inline">
           <li class="bg-primary">Lorem ipsum</li>
           <li class="bg-danger">Phasellus iaculis</li>
           <li class="bg-success">Nulla volutpat</li>
         </ul>
	     <br/><br/>
	     <!-- 描述 -->
	     <dl>
           <dt>Description lists</dt>
           <dd>A description list is perfect for defining terms.</dd>
           <dt>Euismod</dt>
           <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
           <dd>Donec id elit non mi porta gravida at eget metus.</dd>
           <dt>Malesuada porta</dt>
           <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
         </dl>
	     <br/><br/>
	     <!-- 水平排列的描述 -->
	     <dl class="dl-horizontal" >
           <dt>Description lists</dt>
           <dd>A description list is perfect for defining terms.</dd>
           <dt>Euismod</dt>
           <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
           <dd>Donec id elit non mi porta gravida at eget metus.</dd>
           <dt>Malesuada porta</dt>
           <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
           <dt>Felis euismod semper eget lacinia</dt>
           <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
         </dl>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	     <br/><br/>
	</body>
</html>	